<template>
    <div>
        <div class="pwd_frame">
            <input type="tel" maxlength="6" id="pwd_input" v-model="code" autofocus="autofocus"/>
            <div v-for="(item, index) in figure" :key="index" class="pwd_circle"><span :class="{pwdShow:item===1,pwdHide:item===0}"></span></div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                code: '',
                figure: [0, 0, 0, 0, 0, 0]
            };
        },
        methods: {
            clearCode() {
                this.code = '';
            }
        },
        watch: {
            code(val) {
                this.figure = [0, 0, 0, 0, 0, 0];
                for (let i = 0; i < val.length; i++) {
                    this.$set(this.figure, i, 1);
                }
                this.$emit('inputCode', val);
            }
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl"
    .pwd_frame {
        width: 70vw;
        letter-spacing: -0.5em;
        margin: 4vw auto 0;
        position: relative;
        text-align: center;
        & input{
            position: absolute;
            width: 61.3vw;
            height: 10.5vw;
            color: #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 1px;
            opacity: 0;
            z-index: 9999;
        }
        & .pwd_circle {
            display: inline-block;
            vertical-align: middle;
            width: 10vw;
            height: 10vw;
            text-align: center;
            margin-left: -1px;
            border(#666);
            & span {
                width: 7px;
                height: 7px;
                border-radius(12px);
                background: #000;
                display: block;
                margin: 4vw auto;
                &.pwdShow{
                    opacity: 1;
                }
                &.pwdHide{
                    opacity: 0;
                }
            }
        }
    }
</style>
